<template>
  <QupList :column="3" sep="：" default-value="" label-position="right" label-width="130">
    <QupListItem v-if="editable" :value="detail.code" label-width="0" :span="24">
      <el-form ref="form" :model="shopFormData" :rules="formRules" label-width="130px">
        <el-form-item label="门店编码" prop="code">
          <c-common-search-shop-by-customer
            v-model="shopFormData.code"
            :label.sync="shopFormData.name"
            :customer-code="customerCode"
            :disabled="!customerCode"
            :depend-on-observe="customerCode"
            start-observe
            style="width:240px"
            @change="handleShopChange"
          />
        </el-form-item>
      </el-form>
    </QupListItem>
    <QupListItem label="门店经营业务类型" :value="changeShopFormData.businessTypeName" />
    <QupListItem label="门店名称" :value="changeShopFormData.name" />
    <QupListItem label="门店类型" :value="changeShopFormData.shopClassifyName" />
    <QupListItem label="国别" :value="changeShopFormData.countryName" />
    <QupListItem label="省份" :value="changeShopFormData.provinceName" />
    <QupListItem label="城市" :value="changeShopFormData.cityName" />
    <QupListItem label="区/县" :value="changeShopFormData.countyName" />
    <QupListItem label="街道/乡镇" :value="changeShopFormData.townName" />
    <QupListItem label="详细地址" :value="changeShopFormData.shopAddr" :span="24" />
    <QupListItem label="所在楼层" :value="changeShopFormData.floor" />
    <QupListItem label="城市级别" :value="changeShopFormData.cityLevelName" />
    <QupListItem label="市场层级" :value="changeShopFormData.marketLevelName" />
    <QupListItem label="门店咨询电话" :value="changeShopFormData.shopInfoPhone" />
    <QupListItem label="售后电话" :value="changeShopFormData.shopServPhone" />
    <QupListItem label="出图总面积(㎡)" :value="changeShopFormData.outpicArea || 0" />
    <QupListItem label="是否装修门头" :value="changeShopFormData.isDecorationDoorHead" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
    <QupListItem label="门头面积" :value="changeShopFormData.doorHeadArea" />
    <QupListItem label="营业执照图片" :span="24">
      <c-file-list :uploadable="false" :editable="false" :model-id="shopDTO.id" view-type="list" type-code="ACCESS055" />
    </QupListItem>
    <QupListItem label="专卖店特许经营合同图片" :span="24">
      <c-file-list :uploadable="false" :editable="false" :model-id="shopDTO.id" view-type="list" type-code="ACCESS056" />
    </QupListItem>
    <QupListItem label="成品面积(㎡)" :value="changeShopFormData.endProductArea || 0" />
    <QupListItem label="全屋定制面积(㎡)" :value="changeShopFormData.fullHouseArea || 0" />
    <QupListItem label="整体橱柜面积(㎡)" :value="changeShopFormData.cabinetArea || 0" />
    <QupListItem label="卫浴面积(㎡)" :value="changeShopFormData.bathroomArea || 0" />
    <QupListItem label="样板间面积(㎡)" :value="changeShopFormData.modelRoomArea || 0" />
    <QupListItem label="窗帘面积(㎡)" :value="changeShopFormData.curtainArea || 0" />
    <QupListItem label="橱柜套数" :value="changeShopFormData.cabinetSuite" />
    <QupListItem label="卫浴套数" :value="changeShopFormData.bathroomSuite" />
    <QupListItem label="单店总面积(㎡)" :value="changeShopFormData.totalArea || 0" />
    <QupListItem label="门头类型" :value="changeShopFormData.headTypeName" />
    <QupListItem label="门头面积(㎡)" :value="changeShopFormData.doorHeadArea || 0" />
    <QupListItem label="门楣面积(㎡)" :value="changeShopFormData.lintelArea || 0" />
  </QupList>
</template>
<script>
export default {
  name: 'ShopBaseInfo',
  props: {
    detail: {
      type: Object,
      default: undefined
    },
    editable: {
      type: Boolean,
      default: false
    },
    customerCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      shopFormData: {
        afterBusinessType: '',
        afterBusinessTypeName: '',
        bathroomArea: '',
        bathroomSuite: '',
        businessType: '',
        businessTypeName: '',
        cabinetArea: '',
        cabinetSuite: '',
        cancelReason: '',
        changeCode: '',
        city: '',
        cityLevel: '',
        cityLevelName: '',
        cityName: '',
        code: '',
        countryCode: '',
        countryName: '',
        county: '',
        countyName: '',
        curtainArea: '',
        doorHeadArea: '',
        endProductArea: '',
        floor: '',
        fullHouseArea: '',
        headTypeCode: '',
        headTypeName: '',
        isChange: '',
        isDecorationDoorHead: '',
        isMarketConnect: '',
        isReportPic: '',
        isTransferSales: '',
        lintelArea: '',
        marketLevelCode: '',
        marketLevelName: '',
        modelRoomArea: '',
        name: '',
        operateArea: '',
        outpicArea: '',
        province: '',
        provinceName: '',
        shopAddr: '',
        shopClassify: '',
        shopClassifyName: '',
        shopInfoPhone: '',
        shopServPhone: '',
        totalArea: '',
        town: '',
        townName: ''
      }
    }
  },
  computed: {
    changeShopFormData() {
      return this.editable ? this.shopFormData : this.shopDTO
    },
    shopDTO() {
      return this.detail.shopDTO || {}
    },
    formRules: {
      code: [{ required: this.editable, message: '请选择门店', trigger: 'change' }]
    }
  },
  watch: {
    detail: {
      handler(v) {
        this.initFormData()
      },
      immediate: true
    },
    shopFormData: {
      handler(v) {
        this.$emit('input', JSON.parse(JSON.stringify(v)))
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    initFormData() {
      const shopDTO = this.detail.shopDTO || {}
      Object.entries(this.shopFormData).forEach(([k, v]) => {
        this.$set(this.shopFormData, k, shopDTO[k] !== undefined ? shopDTO[k] : v)
      })
    },
    handleShopChange(value) {
      if (!value) {
        value = {}
      }
      Object.entries(this.shopFormData).forEach(([k, v]) => {
        this.$set(this.shopFormData, k, value[k] !== undefined ? value[k] : v)
      })
    },
    validate() {
      return this.$refs.form.validate()
    }
  }
}
</script>
